<template>
  <h1>我是用户组件，我在Home页被引用</h1>
  <div style="padding: 10px;">
    输入昵称：<el-input v-model="address" placeholder="请输入内容" style="width:20%" clearable></el-input>
    <h1>我是从store那个获取到的数据{{this.$store.state.count}}</h1>
    <h2>我是通过store.js里面的getters方法获取到的值{{this.$store.getters.getCount}}</h2>
    <h1>我是从store那里获取到的数据{{this.$store.state.price}}</h1>
    加：<el-button @click="add">+</el-button>
    减：<el-button @click="del">-</el-button>
    <br>
    <h2>我是通过store.js里面的方法获取到的值{{this.$store.state.bankinfo.bankName}}</h2>
    <el-input  name="" v-model="textValue" style="width:20%"></el-input>
    <el-button  @click="bankinfo">获取数据</el-button>
    <br>

    <h2>我是通过store.js里面的方法获取到的值{{this.$store.state.count}}</h2>
    <el-input  name=""  v-model="count" style="width:20%"></el-input>
    <el-button  @click="setCount">设置Count的值</el-button>
    <br>
  </div>
</template>


<script>
export default {
  name: "User",

  data() {
    return {
      address: "ShangHai",
      textValue:"",
      count:"",

    }
  },




  watch: {
    //监听输入框中值的变化
    address(val) {
      console.log("我要开始监听了......"+val)
    }
  },

  //commit提交mutations修改为使用dispatch来提交actions  两个方法都是传值给vuex的mutation改变state
  //addCount是个方法，该方法是在store/index.js里面的 mutations里面定义的
  //如果这个方法在actions里面定义，则在这里需要 this.$store.dispatch('addCount',1);
  //dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch(‘action方法名’,值)
  //commit：同步操作，写法：this.$store.commit(‘mutations方法名’,值)
  methods:{
    add(){
      this.$store.commit('addCount',1);
    },
    del(){
      this.$store.commit('delCount',1);
    },
    bankinfo(){
      //开始调用store/index.js里面  mutations里面的getBankInfo方法
      this.$store.commit('getBankInfo',this.textValue);
    },

    setCount(){
      //step1: 开始调用store/index.js里面的 actions里面的 setCount方法；100是参数
      this.$store.dispatch('setCount',100);
    },


  }
}
</script>

<style scoped>

</style>
